<template >
    <div>
        <div style="float: left">
            <!--            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
            <el-checkbox-group v-model="checkedPermissions" >
                <div   style="display: flex; flex-direction: column;">
                    <el-checkbox label="销售" @change="addRootSale()"  style="transform: scale(1.3); padding-left: 35px;height:40px" ></el-checkbox>
                    <el-checkbox label="采购" @change="addRootBuy()"  style="transform: scale(1.3); padding-left: 35px;height: 40px" ></el-checkbox>
                    <el-checkbox label="赠送" @change="addRootGive()"  style="transform: scale(1.3); padding-left: 38px;height: 40px"></el-checkbox>
                    <!--                       <el-checkbox v-for="permission in permissions" :label="permission" :key="permission" class="vertical-checkbox" @change="addRoot()">{{permission}}</el-checkbox>-->
                </div>
            </el-checkbox-group>
            <div style="width: 23%">
            产品类型 </div>

            <el-select v-model="label" placeholder="请选择" :clearable="true" @change="selectproduct" style="width: 300px;height: 60px">
                <el-option
                        v-for="product in products"
                        :key="'product:'+product.dictCode"
                        :label="product.dictLabel"
                        :value="product.dictCode">
                </el-option>
            </el-select>

            <div style="width: 23%">
            品牌</div>
            <el-select v-model="brand" placeholder="请选择":clearable="true" @change="selectBrand" style="width: 300px;height: 60px">
                <el-option
                        v-for="brand in brands"
                        :key="'brand:'+brand.dictCode"
                        :label="brand.dictLabel"
                        :value="brand.dictCode">
                </el-option>
            </el-select>

            <div style="width: 23%">
            产品名称</div>
            <el-select v-model="name" placeholder="请选择" :clearable="true"  @change="selectName" style="width: 300px;height: 60px">
                <el-option
                        v-for="name in names"
                        :key="'name:'+name.dictCode"
                        :label="name.dictLabel"
                        :value="name.dictCode">
                </el-option>
            </el-select>

        </div>
        <div>

            <el-table :data="ProductShows" style="width: 77%; float:right" height="600">
                <el-table-column fixed prop="productCode" label="产品编码" width="150"></el-table-column>
                <el-table-column fixed prop="productName" label="产品名称" width="120"></el-table-column>
                <el-table-column prop="productType" label="产品类型" width="120"></el-table-column>
                <el-table-column prop="productAttribute" label="产品属性" width="120"></el-table-column>
                <el-table-column prop="productBrand" label="品牌" width="120"></el-table-column>
                <el-table-column prop="productModels" label="规格型号" width="120"></el-table-column>
                <el-table-column prop="productUnit" label="单位" width="120"></el-table-column>
                <el-table-column prop="productUnitPrice" label="采购单价/元" width="120"></el-table-column>
                <el-table-column  v-bind:prop="id" label="产品权限" width="200" >
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.salePermissions" @click="handleClick(scope.row.id)" type="primary" style="padding-left: 5px; line-height: 5px; height: 25px; width: 40px">销售</el-button>
                        <el-button v-if="scope.row.purchasePermissions" @click="handleClick(scope.row.id)" type="primary" style="padding-left: 5px; line-height: 5px; height: 25px; width: 40px">采购</el-button>
                        <el-button v-if="scope.row.presentedPermissions" @click="handleClick(scope.row.id)"  type="primary" style="padding-left: 5px; line-height: 5px; height: 25px; width: 40px">赠送</el-button>

                    </template>

                </el-table-column>
                <el-table-column prop="productImgsId" label="产品图片" width="120"></el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%">
            <div style="display: flex; flex-wrap: wrap;">
                <div style="flex: 50%;">
                    产品编码
                    <el-input

                            v-model="product.productCode"
                            :disabled="true">
                    </el-input>
                    产品名称
                    <el-input

                            v-model="product.productName"
                            :disabled="true">
                    </el-input>
                    产品类型
                    <el-input

                            v-model="product.productType"
                            :disabled="true">
                    </el-input>
                    产品属性
                    <el-input

                            v-model="product.productAttribute"
                            :disabled="true">
                    </el-input>
                    品牌
                    <el-input

                            v-model="product.productBrand"
                            :disabled="true">
                    </el-input>
                </div>
                <div style="flex: 50%;">
                    规格型号
                    <el-input

                            v-model="product.productModels"
                            :disabled="true">
                    </el-input>
                    单位
                    <el-input

                            v-model="product.productUnit"
                            :disabled="true">
                    </el-input>
                    采购单价/元
                    <el-input

                            v-model="product.productUnitPrice"
                            :disabled="true">
                    </el-input>
                    产品权限
                    <el-input

                            v-model="product.productCode"
                            :disabled="true">
                    </el-input>
                    产品图片
                    <el-input

                            v-model="product.productImgsId"
                            :disabled="true">
                    </el-input>
                </div>
            </div>

        </el-dialog>
    </div>

</template>

<script>
    const access = ['销售', '采购', '赠送'];
    export default {

        data() {

            return {
                // 这里可以添加你的数据，以下是示例数据
                input:"",
                product:{},
                names:[{}],
                name:'',
                brands:[{}],
                brand:'',
                products:[{}],
                label:'',
                value:'',
                ProductShows: [{}],
                dialogVisible: false,
                id:"",
                checkAll: false,
                checkedPermissions:[],
                permissions: access,
                isIndeterminate: true,
                queryRoot:{
                    presentedPermissions:"false",
                    salePermissions:"false",
                    purchasePermissions:"false",
                }
            }

        },
        created() {
            this.handleRefresh();
            this.producs();
            this.brans();
            this.nams();
        },
        methods:
            {

                // handleCheckAllChange(val) {
                //
                //         this.access = val ? cityOptions : [];
                //         this.isIndeterminate = false;
                //     },
                addRootSale(){

                    if(this.queryRoot.salePermissions=="true"){

                        this.queryRoot.salePermissions="false";
                    }
                    else{
                        this.queryRoot.salePermissions="true";
                    }
                    console.log(this.queryRoot)
                    this.handleRoot();
                },
                addRootGive(){
                    console.log(this.queryRoot)
                    if(this.queryRoot.presentedPermissions=="true"){
                        this.queryRoot.presentedPermissions="false";
                    }
                    else{
                        this.queryRoot.presentedPermissions="true";
                    }
                    this.handleRoot();
                },
                addRootBuy(){
                    console.log(this.queryRoot)
                    if(this.queryRoot.purchasePermissions=="true"){
                        this.queryRoot.purchasePermissions="false";
                    }
                    else{
                        this.queryRoot.purchasePermissions="true";
                    }
                    this.handleRoot();
                },
                // async handleCheckedChange(value) {
                //         alert(this.checkedPermissions)
                //    // alert(this.checkedPermissions+(typeof checkedPermissions) )
                //     //const params = { checkedPermissions: this.checkedPermissions };
                //     let checkedCount = value.length;
                //     this.checkAll = checkedCount === this.permissions.length;
                //     this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissions.length;
                //     const response = await axios.post("manage/product/selectPermissions", { checkedPermissions: this.checkedPermissions }, {
                //         headers: {
                //             'Content-Type': 'application/json'
                //         }
                //     });
                // },

                //根据id查询对象
                async handleClick(id){
                    this.dialogVisible = true;
                    const response =  await this.$axios.get("manage/product/selectId", {
                        params: { dataType:id }
                    });

                    this.product = response.data.productShows;


                },

                //根据类型查询
                async selectproduct(value){
                    const selectedproduct = this.products.find(product => product.dictCode === value);
                    const response = await this.$axios.get("manage/product/selsctProduct", {
                        params: { dataType: selectedproduct.dictLabel }
                    });
                    this.ProductShows = response.data.productShows || [];
                },
                //根据品牌查询
                async selectBrand(value){
                    const selectedBrand = this.brands.find(brand => brand.dictCode === value);
                    const response = await this.$axios.get("manage/product/selsctBrand", {
                        params: { dataType: selectedBrand.dictLabel }
                    });
                    this.ProductShows = response.data.productShows || [];
                },
                //根据产品名称查询
                async selectName(value){
                    const selsetName = this.names.find(name => name.dictCode === value);
                    const response = await this.$axios.get("manage/product/selsctName", {
                        params: { dataType: selsetName.dictLabel }
                    });
                    this.ProductShows = response.data.productShows || [];
                },
                /*获得产品信息*/
                handleRefresh(){
                    this.$axios.get("manage/product/list")
                        .then(response=>{

                            this.ProductShows = response.data.productShows;

                        });
                },
                handleRoot(){
                    this.$axios.post("manage/product/list",this.queryRoot)
                        .then(response=>{
                            console.log(response)
                            this.ProductShows = response.data.productShows;

                        });
                },
                format(percentage) {
                    return percentage === 100? '满' : `${percentage}%`;
                },
                /*数据库字典产品类型*/
                async producs() {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'product' }
                    });

                    this.products = response.data.dataType || [];

                },
                /*数据库字典产品品牌*/
                async brans() {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'brand' }
                    });
                    this.brands = response.data.dataType || [];

                },
                /*数据库字典产品名称*/
                async nams() {
                    const response = await this.$axios.get("manage/scmDictData/dictDataList", {
                        params: { dataType: 'name' }
                    });

                    this.names = response.data.dataType || [];

                },

            }


    }
</script>

<style>

</style>